<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>notification</title>
    <!-- 文档公共样式 及组件特有示例样式-->
    <!-- <link rel="stylesheet"  href="../../docs.css" /> -->
    <!-- 组件样式（全部的） -->
    <link rel="stylesheet" href="../../dist/tdesign.css">
    <!--
      TDesign 图标库，桌面端与移动端用同样的资源
      使用方式：<i class="t-icon t-icon-delete"></i>
    -->
    <link rel="stylesheet" href="https://tdesign.gtimg.com/icon/0.0.3/fonts/index.css">

</head>
<body>
  <div class="tdesign-demo-wrap">

    <!-- 开发者信息 -->
    <div class="tdesign-demo-wrap__name">
      <h1 class="">Notification</h1>
      <p class="tdesign-demo-wrap__info">开发者：zackguo</p>
      <p class="tdesign-demo-wrap__info">创建日期：2020-06-03</p>
      <p class="tdesign-demo-wrap__info">说明：TDesign notification 组件的基本样式</p>
    </div>

    <!-- 组件开始区 -->


    <!-- 默认样式 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">默认</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">

        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-notification">
            <div class="t-notification__main">
              <div class="t-notification__title__wrap">
                <span class="t-notification__title">标题名称</span>
                <span class="t-icon t-icon-close"></span>
              </div>
              <div class="t-notification__content">这是一条可以自动关闭的消息通知</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->

      </div>
    </div>

    <!-- 组件状态 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">类型</h2>

      <!-- 灰底区域 可多个 -->
      <div class="tdesign-demo-item__body">
        <h3 class="tdesign-demo-item--message__body__title">1.基础消息通知：</h3>
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-notification">
            <div class="t-notification__main">
              <div class="t-notification__title__wrap">
                <span class="t-notification__title">标题名称</span>
                <span class="t-icon t-icon-close"></span>
              </div>
              <div class="t-notification__content">这是一条可以自动关闭的消息通知</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
      <div class="tdesign-demo-item__body">
        <h3 class="tdesign-demo-item--message__body__title">2.带图标消息通知：</h3>
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-notification">
            <div class="t-notification__icon">
              <span class="t-icon t-icon-prompt_fill t-is-info"></span>
            </div>
            <div class="t-notification__main">
              <div class="t-notification__title__wrap">
                <span class="t-notification__title">普通通知</span>
                <span class="t-icon t-icon-close"></span>
              </div>
              <div class="t-notification__content">这是一条普通消息通知</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
      <div class="tdesign-demo-item__body">
        <h3 class="tdesign-demo-item--message__body__title">3.带操作消息通知：</h3>
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-notification">
            <div class="t-notification__icon">
              <span class="t-icon t-icon-prompt_fill t-is-info"></span>
            </div>
            <div class="t-notification__main">
              <div class="t-notification__title__wrap">
                <span class="t-notification__title">可跳转的消息通知</span>
                <span class="t-icon t-icon-close"></span>
              </div>
              <div class="t-notification__content">这是一条消息通知</div>
              <div class="t-notification__detail">
                <span class="t-notification__detail-item t-is-active">查看详情</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-notification">
            <div class="t-notification__icon">
              <span class="t-icon t-icon-prompt_fill t-is-info"></span>
            </div>
            <div class="t-notification__main">
              <div class="t-notification__title__wrap">
                <span class="t-notification__title">可跳转的消息通知</span>
                <span class="t-icon t-icon-close"></span>
              </div>
              <div class="t-notification__content">这是一条消息通知</div>
              <div class="t-notification__detail">
                <span class="t-notification__detail-item">重启</span>
                <span class="t-notification__detail-item t-is-active">稍后提醒我</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

    <!-- 组件类型 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">状态</h2>
      <div class="tdesign-demo-item__body">
        <h3 class="tdesign-demo-item--message__body__title">1.鼠标 hover 态 & Click 态：</h3>
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-notification">
            <div class="t-notification__icon">
              <span class="t-icon t-icon-prompt_fill t-is-info"></span>
            </div>
            <div class="t-notification__main">
              <div class="t-notification__title__wrap">
                <span class="t-notification__title">可跳转的消息通知</span>
                <span class="t-icon t-icon-close"></span>
              </div>
              <div class="t-notification__content">这是一条消息通知</div>
              <div class="t-notification__detail">
                <span class="t-notification__detail-item">重启</span>
                <span class="t-notification__detail-item t-is-active">稍后提醒我</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>

      <div class="tdesign-demo-item__body">
        <h3 class="tdesign-demo-item--message__body__title">2.并列出现状态：</h3>
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-notification">
            <div class="t-notification__icon">
              <span class="t-icon t-icon-success_fill t-is-success"></span>
            </div>
            <div class="t-notification__main">
              <div class="t-notification__title__wrap">
                <span class="t-notification__title">成功通知</span>
                <span class="t-icon t-icon-close"></span>
              </div>
              <div class="t-notification__content">这是一条成功的消息通知</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-notification">
            <div class="t-notification__icon">
              <span class="t-icon t-icon-prompt_fill t-is-info"></span>
            </div>
            <div class="t-notification__main">
              <div class="t-notification__title__wrap">
                <span class="t-notification__title">普通通知</span>
                <span class="t-icon t-icon-close"></span>
              </div>
              <div class="t-notification__content">这是一条普通的消息通知</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-notification">
            <div class="t-notification__icon">
              <span class="t-icon t-icon-warning_fill t-is-warning"></span>
            </div>
            <div class="t-notification__main">
              <div class="t-notification__title__wrap">
                <span class="t-notification__title">警示通知</span>
                <span class="t-icon t-icon-close"></span>
              </div>
              <div class="t-notification__content">这是一条警示的消息通知</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-notification">
            <div class="t-notification__icon">
              <span class="t-icon t-icon-prompt_fill t-is-error"></span>
            </div>
            <div class="t-notification__main">
              <div class="t-notification__title__wrap">
                <span class="t-notification__title">危险通知</span>
                <span class="t-icon t-icon-close"></span>
              </div>
              <div class="t-notification__content">这是一条危险的消息通知</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

    <!-- 组件尺寸 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">尺寸</h2>
      <div class="tdesign-demo-item__body">
        <h3 class="tdesign-demo-item--message__body__title">1.宽度固定400px：</h3>
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-notification">
            <div class="t-notification__icon">
              <span class="t-icon t-icon-prompt_fill t-is-info"></span>
            </div>
            <div class="t-notification__main">
              <div class="t-notification__title__wrap">
                <span class="t-notification__title">普通通知</span>
                <span class="t-icon t-icon-close"></span>
              </div>
              <div class="t-notification__content">这是一条普通的消息通知</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
      <div class="tdesign-demo-item__body">
        <h3 class="tdesign-demo-item--message__body__title">2.最多支持三行文字：</h3>
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-notification">
            <div class="t-notification__icon">
              <span class="t-icon t-icon-prompt_fill t-is-info"></span>
            </div>
            <div class="t-notification__main">
              <div class="t-notification__title__wrap">
                <span class="t-notification__title">普通通知</span>
                <span class="t-icon t-icon-close"></span>
              </div>
              <div class="t-notification__content">文案不限长度，但是展示最大哦显示三行折行的末尾处显示折行的末尾处显示折行的末尾处</div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <div class="t-notification">
            <div class="t-notification__icon">
              <span class="t-icon t-icon-prompt_fill t-is-info"></span>
            </div>
            <div class="t-notification__main">
              <div class="t-notification__title__wrap">
                <span class="t-notification__title">可跳转的消息通知</span>
                <span class="t-icon t-icon-close"></span>
              </div>
              <div class="t-notification__content">文案不限长度，但是展示最大哦显示三行折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处显示折行的末尾处</div>
              <div class="t-notification__detail">
                <span class="t-notification__detail-item">重启</span>
                <span class="t-notification__detail-item t-is-active">稍后提醒我</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

    <!-- 组件尺寸 -->
    <div class="tdesign-demo-item">
      <h2 class="tdesign-demo-item__title">动画</h2>
      <div class="tdesign-demo-item__body">
        <!-- 内容区 Start-->
        <div class="tdesign-demo-block">
          <!-- top-left -->
          <button
            style="color: #fff;border: 1px solid #0052d9;background-color: #0052d9;height: 32px;line-height: 28px;font-size: 14px;cursor: pointer;"
            onclick="document.querySelector('.t-notification__show--top-left').style.display = ''">top-left</button>
          <div class="t-notification__show--top-left" style="display: none;">
            <div class="t-notification">
              <div class="t-notification__icon">
                <span class="t-icon t-icon-prompt_fill t-is-info"></span>
              </div>
              <div class="t-notification__main">
                <div class="t-notification__title__wrap">
                  <span class="t-notification__title">普通通知</span>
                  <span class="t-icon t-icon-close" onclick="document.querySelector('.t-notification__show--top-left').style.display = 'none'"></span>
                </div>
                <div class="t-notification__content">这是一条普通的消息通知</div>
              </div>
            </div>
          </div>
          <!-- top-right -->
          <button
            style="color: #fff;border: 1px solid #0052d9;background-color: #0052d9;height: 32px;line-height: 28px;font-size: 14px;cursor: pointer;"
            onclick="document.querySelector('.t-notification__show--top-right').style.display = ''">top-right</button>
          <div class="t-notification__show--top-right" style="display: none;">
            <div class="t-notification">
              <div class="t-notification__icon">
                <span class="t-icon t-icon-prompt_fill t-is-info"></span>
              </div>
              <div class="t-notification__main">
                <div class="t-notification__title__wrap">
                  <span class="t-notification__title">普通通知</span>
                  <span class="t-icon t-icon-close" onclick="document.querySelector('.t-notification__show--top-right').style.display = 'none'"></span>
                </div>
                <div class="t-notification__content">这是一条普通的消息通知</div>
              </div>
            </div>
          </div>
          <!-- bottom-left -->
          <button
            style="color: #fff;border: 1px solid #0052d9;background-color: #0052d9;height: 32px;line-height: 28px;font-size: 14px;cursor: pointer;"
            onclick="document.querySelector('.t-notification__show--bottom-left').style.display = ''">bottom-left</button>
          <div class="t-notification__show--bottom-left" style="display: none;">
            <div class="t-notification">
              <div class="t-notification__icon">
                <span class="t-icon t-icon-prompt_fill t-is-info"></span>
              </div>
              <div class="t-notification__main">
                <div class="t-notification__title__wrap">
                  <span class="t-notification__title">普通通知</span>
                  <span class="t-icon t-icon-close" onclick="document.querySelector('.t-notification__show--bottom-left').style.display = 'none'"></span>
                </div>
                <div class="t-notification__content">这是一条普通的消息通知</div>
              </div>
            </div>
          </div>
          <!-- bottom-right -->
          <button
            style="color: #fff;border: 1px solid #0052d9;background-color: #0052d9;height: 32px;line-height: 28px;font-size: 14px;cursor: pointer;"
            onclick="document.querySelector('.t-notification__show--bottom-right').style.display = ''">bottom-right</button>
          <div class="t-notification__show--bottom-right" style="display: none;">
            <div class="t-notification">
              <div class="t-notification__icon">
                <span class="t-icon t-icon-prompt_fill t-is-info"></span>
              </div>
              <div class="t-notification__main">
                <div class="t-notification__title__wrap">
                  <span class="t-notification__title">普通通知</span>
                  <span class="t-icon t-icon-close" onclick="document.querySelector('.t-notification__show--bottom-right').style.display = 'none'"></span>
                </div>
                <div class="t-notification__content">这是一条普通的消息通知</div>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容区 End-->
      </div>
    </div>

  </div>

</body>
</html>
